<template>
  <div>
    <h3>Test组件（借助辅助方法）</h3>
    <p>{{ age2 }}</p>
    <p>{{ pingfang }}</p>
    <button @click="updateAge(40)">更新age</button>
    <button @click="updateAgeAfter2s(200)">2s后更新age</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      age: 100
    }
  },
  computed: {
    // ...mapState(['age', 'list'])
    // 如果仓库中的age和当前组件中的age有冲突；则可以修改仓库中的数据的名字为age2
    ...mapState({ age2: 'age', list: 'list' }),
    ...mapGetters(['pingfang'])
    // age () {
    //   return this.$store.state.age
    // },
    // list () {
    //   return this.$store.state.list
    // }
  },
  methods: {
    ...mapMutations(['updateAge']),
    ...mapActions(['updateAgeAfter2s'])
  }
}
</script>

<style></style>
